<template>
	<view class="input1">
		<input  class="input2" type="text"  @focus="istac = true" @blur="istac = false"
		
		v-model="iput">
		<image src="../../static/logo.png" class="image1"
		:class="istac ? 'act' : '' "></image>
	</view>
	<view > 预览：{{iput}}</view>
</template>

<script setup>
import { ref } from 'vue';
	const iput  = ref("");
	const istac = ref(false);
	
	
	
</script>

<style lang = "scss" scoped>
	
	.input1{
		padding: 0 20px;
		margin-top: 40px;
		/* position: relative; 只有加这个才能规定层级*/
		position: relative;
		
		
		.input2{
			height: 40px;
			color: red;
			border: 1px solid red;
			position: relative;
			z-index:2;
			background-color: beige;
		}
		.image1{
			width: 40px;
			height: 40px;
			position: absolute;
			z-index: 1;
			top: 0px;
			left: calc(50% - 20px);
			transform: top 5s;
			
		}
		.image1.act{
			top: -40px;
		}
	}
	
</style>
